<template>
    <main>home</main>
    <button @click="store.increment">count++：{{ store.count }}</button>
    <ul>
        <li v-for="item in dataList" :key="item.id">{{ item.title }}</li>
    </ul>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';
import { getTopics } from '@/api'
import { ref } from 'vue'
import type { Ref } from 'vue'

interface Item {
    id?: string;
    title?: string;
}
interface Res {
    data: Item[]
}
type PArr = Partial<Item[]>
const dataList: Ref<PArr> = ref([])

const init = () => {
    getTopics().then((res: Res) => {
        dataList.value = res.data
    })
}
init()

const store = useCounterStore();
</script>
<style lang="less" scoped>
main {
    color: red;
}
</style>
